<template>
  <view>

    <image class="base-img" :src="reviewBaseImg" mode="widthFix"></image>
    <tn-button id="print_btn" @click="cusRenderDom" class="btn">打印</tn-button>

    <sp-html2pdf-render
        domId="render-dom"
        ref="renderRef"
        @beforeSavePDF="beforeSavePDF"
        @renderOver="renderOver"
        :auto-open="false"
    ></sp-html2pdf-render>
    <view id="render-dom">
      <view class="main">
        <view class="title">
          <view>河北高速公路集团有限公司</view>
          <view>荣乌分公司</view>
          <view class="juanzong">路 损 案 件 卷 宗</view>
        </view>
        <view class="content">
          <view class="row">
            <view>案 &nbsp; 由：</view>
            <view>{{ jsonData.anyou }}</view>
          </view>
          <view class="row">
            <view>当 事 人：</view>
            <view>{{ jsonData.clientName }}</view>
          </view>
          <view class="row">
            <view>发案时间：</view>
            <view>{{ jsonData.happentime }}</view>
          </view>
          <view class="row">
            <view>发案地点：</view>
            <view>{{ jsonData.locate }}</view>
          </view>
          <view class="row">
            <view>办 案 人：</view>
            <view>{{ jsonData.name }}</view>
          </view>
          <view class="row">
            <view>结案日期：</view>
            <view>{{ jiean }}</view>
          </view>
        </view>
        <view class="foot">
          <view class="row">
            <view> 归档日期：{{ guidang }}</view>
            <view>保管期限</view>
            <view>{{  json.keepTime ||  "30" }}年</view>
          </view>
          <view class="row">
            <view> 卷 内 共&nbsp;{{ json.jNum|| '' }} 件&nbsp;&nbsp;{{ json.yNum || ''}} 页</view>
            <view> 案卷编号</view>
            <view>{{ json.caseNo }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import {base64ToPath} from "@/uni_modules/sp-html2pdf-render/utils";
import {getToken} from "@/utils/auth";
import config from "@/config";
import {addDocPhoto, delDocPhoto, uploadLp, uploadLpPdf} from "@/api/lupeiwenshu";
import {base64ToFile} from "@/utils/typeConversion";
import {formatDate_dayjs} from "@/utils/formatData";

export default {
  props: {
    jsonData: {
      type: Object,
      default: {}
    }
  },
  computed: {
    json() {
      return {...this.jsonData, ...this.jsonData.dossier}
    },
    jiean() {
      return this.json.closeTime ? formatDate_dayjs(this.json.closeTime, 'YYYY-MM-DD', 'YYYY年MM月DD日') : ''
    },
    guidang() {
      return this.json.gdDatel ? formatDate_dayjs(this.json.gdDatel, 'YYYY-MM-DD', 'YYYY年MM月DD日') : ''
    },
  },
  data() {
    return {
      reviewBaseImg: '',
      webImageBase: '',
      locImageBase: ''
    };
  },
  methods: {
    cusRenderDom() {
      this.$refs.renderRef.h2pRenderDom()
    },
    renderOver(e) {
      // e为导出的图片（base64）
      // console.log('e', e);
      const file = base64ToFile(e, 'fjtp', 'png');
      console.log(file)
      base64ToPath(e).then(path => {
        uploadLp({
          filePath: e
        }).then(res => {
          this.$emit('upload', {...res, path})
        }).catch(err => {
          console.log('err', err)
          this.$emit('upload', {code: 500})
        })

      })
    },
    beforeSavePDF(e) {
      // e为导出的pdf（base64）
      // console.log('==== beforeSavePDF :', e);
      return
      const file = base64ToFile(e, 'jzjp021212.pdf', 'pdf');
      base64ToPath(e).then(path => {
        // this.$emit('upload', {
        //   ...{
        //     code: 0,
        //     data: {
        //       url: 'http://47.92.235.205/lppdf/2025/08/13/1955435227065749506.pdf'
        //     }
        //   },
        //   path
        // })

        uploadLpPdf({
          file,
        }).then(res => {
          this.$emit('upload', {...res, path})
        }).catch(err => {
          console.log('err', err)
          this.$emit('upload', {code: 500})
        })
      })

    },
  }
};
</script>
<style scoped lang="scss">
#render-dom {
  width: 794px;
  height: 1123px;
  padding: 130px 77px 0;

  .main {
    margin: 0 auto;
    border-style: double;
    border-color: black;
    font-weight: bold;
    font-family: "宋体";
  }

  .title {
    height: 310px;
    text-align: center;
    font-weight: 700;
    font-size: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .juanzong {
      line-height: 2.5;
    }
  }

  .content {
    height: 330px;
    border-top: 1px solid black;
    font-size: 22px;
    padding: 0 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    .row {
      display: flex;

      view:nth-child(1) {
        min-width: 20%;
      }
    }
  }

  .foot {
    font-size: 26px;
    height: 121px;

    .row {

      display: flex;
      align-items: center;

      padding: 0 10px;
      border-top: 1px solid black;


      view:nth-child(1) {
        width: 58%;
      }

      view:nth-child(2) {
        width: 22%;
        height: 60px;
        line-height: 60px;
        border-left: 1px solid black;
        border-right: 1px solid black;
        text-align: center;
      }

      view:nth-child(3) {
        width: 22%;
        text-align: center;
      }
    }
  }

}

</style>
